<template>
  <div>
    <el-button type="success" @click="AddCount">{{ count }}</el-button>
  </div>
  <div>
    <!-- 动态组件 -->
    <component :is="currentComponent"></component>

    <!-- 切换组件的按钮 -->
    <el-button type="success" @click="toggleComponent">Toggle Component</el-button>
  </div>
</template>
<script setup>
//记得引入包先
import {ref, watch} from "vue";
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';
// 定义一个响应式数据来跟踪当前显示的组件
const currentComponent = ref(ComponentA);


const count = ref(0);
const index = ref(1)
const AddCount = () => {
  // 使用响应式ref应该.value
  count.value++;
}
// 切换组件的函数
const toggleComponent = () => {
  if (index.value == 1) {
    currentComponent.value = ComponentA;
    index.value = 2;
  }
  else if (index.value == 2) {
    currentComponent.value=ComponentB;
    index.value = 1;
  }
}
watch(count, (newVal, oldValue) => {
  console.log("变化后变化前:" + newVal, oldValue);
})
</script>

<!--scoped：让当前样式只在当前组件中生效，不然引到根文件里全局都被操控了-->
<style scoped>

</style>